<template>
  <div class="im_head">
    <div class="im_head_left">
      <div
        @click="get_attention(0)"
        :class="{sel_active: user_type== 0 }"
        style="cursor:pointer"
      >关注的</div>
      <div
        @click="get_attention(1)"
        :class="{sel_active: user_type== 1 }"
        style="cursor:pointer"
      >沟通中</div>
    </div>
    <div class="im_head_right im_head_welcome">
      <p>欢迎语:</p>
      <el-input
        v-model="welcome"
        placeholder="请输入"
        size="small"
        style="width:300px;"
        @change="welcome_change"
      ></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    user_type: [Number, String]
  },
  data() {
    return {
      sel_active: 0,
      welcome: ""
    };
  },
  components: {},
  created() {
    this.get_welcome();
  },
  mounted() {},
  methods: {
    get_welcome() {
      this.$api.getim.get_welcome({}).then(res => {
        if (res.data.code == 200) {
          this.welcome = res.data.result;
        }
      });
    },
    welcome_change() {
      this.$api.getim.edit_welcome({ welcome: this.welcome }).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("操作成功");
          // this.getUserInfo(this.sel_user);
        } else {
          this.$fnc.alertError("操作失败");
          // this.getUserInfo(this.sel_user);
        }
      });
    },
    get_attention(id) {
      //获得已关注的人
      this.$emit("updateUserType", id);
    }
  }
};
</script>
<style lang='less' scoped>
.im_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .im_head_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    > .sel_active {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }
    > div {
      padding: 14px 16px;
      color: #fff;
      background-color: #bababa;
      border-color: #bababa;
      text-align: center;
      border-radius: 5px;
      margin-right: 4px;
    }
  }
}
.im_head_welcome {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.im_head_welcome p {
  font-size: 16px;
  color: #999999;

  width: 100px;
}
</style>
